import React, { Component } from "react";
import { Form, Input, Button, Card } from "antd";
class addzican extends Component {
  constructor(props) {
    super(props);
    this.state = {
      confirmDirty: false,
      autoCompleteResult: [],
    };
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  };

  handleConfirmBlur = (e) => {
    const { value } = e.target;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };

  compareToFirstPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && value !== form.getFieldValue("password")) {
      callback("Two passwords that you enter is inconsistent!");
    } else {
      callback();
    }
  };

  validateToNextPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && this.state.confirmDirty) {
      form.validateFields(["confirm"], { force: true });
    }
    callback();
  };

  handleWebsiteChange = (value) => {
    let autoCompleteResult;
    if (!value) {
      autoCompleteResult = [];
    } else {
      autoCompleteResult = [".com", ".org", ".net"].map(
        (domain) => `${value}${domain}`
      );
    }
    this.setState({ autoCompleteResult });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };

    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        <Card title="基本信息">
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <div>
              <Form.Item label="资产id">
                {getFieldDecorator("username", {
                  rules: [
                    { required: true, message: "Please input your username!" },
                  ],
                })(<Input />)}
              </Form.Item>
              <Form.Item label="资产名称" hasFeedback>
                {getFieldDecorator("username", {
                  rules: [
                    { required: true, message: "Please input your username!" },
                  ],
                })(<Input />)}
              </Form.Item>
              <Form.Item label="资产重要性" hasFeedback>
                {getFieldDecorator("username", {
                  rules: [
                    { required: true, message: "Please input your username!" },
                  ],
                })(<Input />)}
              </Form.Item>
            </div>
            <div>
              <Form.Item label="资产类型" hasFeedback>
                {getFieldDecorator("username", {
                  rules: [
                    { required: true, message: "Please input your username!" },
                  ],
                })(<Input />)}
              </Form.Item>
              <Form.Item label="ip地址" hasFeedback>
                {getFieldDecorator("username", {
                  rules: [
                    { required: true, message: "Please input your username!" },
                  ],
                })(<Input />)}
              </Form.Item>
              <Form.Item label="组织架构" hasFeedback>
                {getFieldDecorator("username", {
                  rules: [
                    { required: true, message: "Please input your username!" },
                  ],
                })(<Input />)}
              </Form.Item>
            </div>
          </div>
        </Card>
        <Card title="设备信息">
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <div>
              <Form.Item label="设备厂商" hasFeedback>
                {getFieldDecorator("username", {
                  rules: [
                    { required: true, message: "Please input your username!" },
                  ],
                })(<Input />)}
              </Form.Item>
              <Form.Item label="设备型号" hasFeedback>
                {getFieldDecorator("username", {
                  rules: [
                    { required: true, message: "Please input your username!" },
                  ],
                })(<Input />)}
              </Form.Item>
              <Form.Item label="设备版本" hasFeedback>
                {getFieldDecorator("username", {
                  rules: [
                    { required: true, message: "Please input your username!" },
                  ],
                })(<Input />)}
              </Form.Item>
            </div>
            <div>
              <Form.Item label="解析模式" hasFeedback>
                {getFieldDecorator("username", {
                  rules: [
                    { required: true, message: "Please input your username!" },
                  ],
                })(<Input />)}
              </Form.Item>
              <Form.Item label="设备价格" hasFeedback>
                {getFieldDecorator("username", {
                  rules: [
                    { required: true, message: "Please input your username!" },
                  ],
                })(<Input />)}
              </Form.Item>
            </div>
          </div>
        </Card>
        <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">
            确定
          </Button>
          <></>
        </Form.Item>
      </Form>
    );
  }
}

export default Form.create()(addzican);
